<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<!-- /.panel -->
<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-bar-chart-o fa-fw"></i> Visitors Status
        <div class="pull-right">
            <!-- Build your select: -->
            <div style="margin-top:-10px">
                <i class="fa fa-calendar fa-2x" aria-hidden="true"></i>
                <select class="multiselect">
                <option value="1">最近一周</option>
                <option value="2">最近两周</option>
                <option value="3">最近三周</option>
                <option value="4">最近四周</option>
            </select>
            </div>
        </div>
    </div>
    <!-- /.panel-heading -->
    <div class="panel-body">
        <div class="row">
            <div class="col-lg-8">
                <div id="visitors_status" style="width: 370px;height:400px;"></div>
            </div>
            <!-- /.col-lg-12 (nested) -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.panel-body -->
</div>
<script src="/javascripts/echarts-all-3.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart_visitors_status = echarts.init(document.getElementById('visitors_status'));
    var data = [{
        value: 350,
        name: '400状态码'
    }, {
        value: 100,
        name: '401状态码'
    }, {
        value: 74,
        name: '403状态码'
    }, {
        value: 35,
        name: '404状态码'
    },{
        value: 350,
        name: '200状态码'
    }];
    var color = '#c23531';
    if (data.length == 0) {
        data.push({
            value: 444,
            name: "Healthy"
        });
        color = "#0f0"
    }
    // 指定图表的配置项和数据
    option_visitors_status = {
        backgroundColor: '#2c343c',

        title: {
            text: 'ZNZCloud访问状态码',
            subtext: '(点击扇形查看详情)',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
            },
            subtextStyle: {
                color: 'yellow',
                fontWeight: 'bold'
            }
        },

        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },

        legend: {
            orient: 'vertical',
            left: 'left',
            textStyle: {
                color: 'yellow'
            },
            inactiveColor: 'rgb(64,74,89)',
            data: ['400状态码', '401状态码', '403状态码', '404状态码','200状态码'],
            selected: {
                // 不选中'系列2'
                '200状态码': false
            }
        },

        visualMap: {
            show: false,
            min: 0,
            max: 1000,
            inRange: {
                colorLightness: [0.5, 1]
            }
        },
        series: [{
            zoom: 4,
            name: 'ZNZCloud访问状态码',
            type: 'pie',
            radius: '40%',
            center: ['50%', '50%'],
            data: data.sort(function (a, b) {
                return a.value - b.value
            }),
            roseType: 'angle',
            label: {
                normal: {
                    // formatter: "{b} : {c} ({d}%)"
                    formatter: "{b}:{c}"
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    // color: color,
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            },
        }]
    };

    myChart_visitors_status.setOption(option_visitors_status);

    myChart_visitors_status.on('click', function (params) {
        //提取状态码数字
        var status = params.name.match(/\d+(\.\d+)?/g);
        window.open(window.location.origin + "/visitors/status/" + status);
    });
</script>